<template>
  <el-dialog title="添加管理员" :visible.sync="formLabelAlign.adminAddFormVisible" @close="closeDialog">
    <el-form :label-position="labelPosition" label-width="80px" :model="addAdmin" :rules="rules" ref="addAdmin">
      <el-form-item label="登陆账号" :label-width="formLabelWidth" prop="mNo">
        <el-input v-model="addAdmin.mNo" placeholder="2-15个字符"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="mName">
        <el-input v-model="addAdmin.mName" placeholder="2-15个字符"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="mPassword">
        <el-input type="password" v-model="addAdmin.mPassword" placeholder="6-16位字符"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth" prop="aPwd2">
        <el-input type="password" v-model="addAdmin.aPwd2" placeholder="重复密码"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio v-model="addAdmin.mSex" label="男">男</el-radio>
        <el-radio v-model="addAdmin.mSex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="角色名" :label-width="formLabelWidth" prop="rName">
        <el-select v-model="addAdmin.rName" @change="changeRoleName">
          <el-option
              v-for="item in rNameAry"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机" :label-width="formLabelWidth" prop="mPhone">
        <el-input v-model="addAdmin.mPhone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth" prop="mEmail">
        <el-input type="email" v-model="addAdmin.mEmail" placeholder="@"></el-input>
      </el-form-item>
      <el-form-item class="form-bottom" :label-width="formLabelWidth">`
        <el-button class="form-btn" @click="submitAdmin('addAdmin',addAdmin)">保存</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapMutations, mapState, mapActions} from 'vuex'

export default {
  name: "AdminAdd",
  data() {
    //检验密码
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.addAdmin.aPwd2 !== '') {
          this.$refs.addAdmin.validateField('checkPass');
        }
        callback();
      }
    }
    //检验再次输入密码
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.addAdmin.mPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    //检验手机号
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
        let reg = /^1[3456789]\d{9}$/
        if (!reg.test(this.addAdmin.mPhone)) {
          callback(new Error('请输入11位正确的手机号'))
        }
        callback()
      }
    }
    //检验邮箱
    let checkEmail = (rule, value, callback) => {
      const mailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      labelPosition: 'right',
      formLabelWidth: '120px',
      value: '',
      rules: {
        mNo: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        mName: [
          {required: true, message: '请输入名字', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        mPassword: [{validator: validatePass, trigger: 'blur'}],
        aPwd2: [{validator: validatePass2, trigger: 'blur'}],
        mPhone: [{validator: validateTel, trigger: 'blur'}],
        mEmail: [{validator: checkEmail, trigger: 'blur'}],
        rName: [{required: true, message: '请选择角色', trigger: 'change'}]
      },
      mainData: [],
      rNameAry: []
    }
  },
  computed: {
    ...mapState('admin', ['formLabelAlign', 'addAdmin'])
  },
  methods: {
    ...mapActions('admin', ['addInfo']),
    ...mapMutations('admin', ['closeDialog', 'changeRoleName']),
    //提交表单验证
    submitAdmin(addAdmin, obj) {
      this.$refs[addAdmin].validate((valid) => {
        if (valid) {
          this.addInfo(obj)
        } else {
          return false;
        }
      })
    },
    //获取rName
    async getrName() {
      await this.$axios({
        method: 'POST',
        url: '/role/showRoles',
        params: {
          page: 1,
          limit: 1000
        }
      }).then(res => {
        this.mainData = res.data.data
        this.mainData.forEach(item => {
          let obj = {value: item.rName, label: item.rName}
          this.rNameAry.push(obj)
        })
      })
    }
  },
  created() {
    this.getrName()
  }
}
</script>

<style scoped>
.form-btn {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFF;
}

.form-bottom {
  padding: 20px 0;
  border-top: 1px dashed #beb8b8;
}
</style>